<template>
  <el-container v-loading="loading">

    <div class="chart-group">
      <div class="title">
        <h3>数据统计</h3>
      </div>
      <div class="charts">
        <el-row>
          <div class="info-group-block">
            <h3>服务人员接单奖励</h3>
            <p>{{data.runner_reward}}</p>
          </div>
          <div class="info-group-block">
            <h3>优惠券抵扣金额</h3>
            <p>{{data.coupon_price}}</p>
          </div>
          <div class="info-group-block">
            <h3>积分抵扣金额</h3>
            <p>{{data.integral_price}}</p>
          </div>
          <div class="info-group-block">
            <h3>折扣抵扣金额</h3>
            <p>{{data.discount_price}}</p>
          </div>
          <div class="info-group-block">
            <h3>平台优惠总计</h3>
            <p>{{data.discount_all_price}}</p>
          </div>
        </el-row>

        <el-row>
          <div class="info-group-block">
            <h3>平台总收入</h3>
            <p>{{data.count}}</p>
          </div>
          <div class="info-group-block">
            <h3>用户支付总金额</h3>
            <p>{{data.pay_money}}</p>
          </div>
          <div class="info-group-block">
            <h3>保证金总金额</h3>
            <p>{{data.bond_money}}</p>
          </div>
          <div class="info-group-block">
            <h3>用户充值总金额</h3>
            <p>{{data.recharge}}</p>
          </div>
        </el-row>
        <el-row>
          <div class="info-group-block">
            <h3>平台用户总数</h3>
            <p>{{data.user}}</p>
          </div>
          <div class="info-group-block">
            <h3>用户余额统计</h3>
            <p>{{data.user_money}}</p>
          </div>
          <div class="info-group-block">
            <h3>服务人员余额统计</h3>
            <p>{{data.runner_money}}</p>
          </div>
        </el-row>

        <el-row>
          <div class="info-group-block">
            <h3>运营中服务人员数量</h3>
            <p>{{data.runner}}</p>
          </div>
          <div class="info-group-block">
            <h3>已完成订单总数</h3>
            <p>{{data.order}}</p>
          </div>
        </el-row>


      </div>
    </div>

  </el-container>

</template>

<script>
  export default {
    mounted: function () {
      let _this = this;
      this.api.getPlatformOrderStatistic().then(function (res) {
        if (res.code == 1) {
          _this.data = res.data;
          _this.loading = false;
        }
      }).catch(function (error) {
        throw new Error(error);
      })

    },
    data() {
      return {
        loading: true,  // 页面加载
        data:{
          "pay_money":"0",                //类型：Number  必有字段  备注：1用户支付总金额
          "bond_money":"0",                //类型：Number  必有字段  备注：1保证金总金额
          "recharge":"0",                //类型：Number  必有字段  备注：1用户充值总金额
          "count":"0",                //类型：Number  必有字段  备注：1平台总收入
          "user":"0",                //类型：Number  必有字段  备注：2平台用户总数
          "user_money":"0",                //类型：Number  必有字段  备注：2用户余额统计
          "runner":"0",                //类型：Number  必有字段  备注：3运营中服务人员数量
          "runner_money":"0",                //类型：Number  必有字段  备注：3服务人员余额统计
          "runner_reward":"0",                //类型：Number  必有字段  备注：3服务人员接单奖励
          "order":"0",                //类型：Number  必有字段  备注：4已完成订单总数
          "coupon_price":"0",                //类型：Number  必有字段  备注：4优惠券抵扣金额
          "integral_price":"0",                //类型：Number  必有字段  备注：4积分抵扣金额
          "discount_price":"0",                //类型：Number  必有字段  备注：4折扣抵扣金额
          "discount_all_price":"0",                //类型：Number  必有字段  备注：1平台优惠总计
        },
      }
    },
    methods: {
      /**
       * 修改图表数据
       */
      changeChartData(type = 1) {
        let _this = this;
        if (!_this.allChartData) {
          return false;
        }
        let tempArr = [];
        let dataType = "";
        if (type == 1) {
          dataType = "day";
        } else if (type == 2) {
          dataType = "month";
        } else if (type == 3) {
          dataType = "year";
        }
        _this.allChartData[dataType].forEach(function (item, index) {
          tempArr.push({
            "当前日期": item.date,
            "增长人数": item.count
          });
        })
        _this.chartData.rows = tempArr;
      },
      /**
       *
       */
      changeChartType(type = "line") {
        this.chartSettings.type = type;
      }
    }
  }
</script>

<style scoped>
  .el-container {
    width: 100%;
    display: block;
  }

  .chart-group {
    width: 100%;
    margin: 50px 0;
    overflow: hidden;
    float: left;
  }

  .ve-line {
    width: 95% !important;
    height: 400px !important;
    margin: 0 auto;
  }

  .info-group-block {
    flex: 1;
    max-width: 23%;
    display: inline-block;
    margin: 15px 0 15px 1%;
    text-align: center;
    color: #ffffff;
    padding: 20px 15px;
    border-radius: 3px;
  }

  .info-group-block h3, .info-group-block p {
    font-size: 18px;
    margin: 0;
    padding: 0;
  }

  .info-group-block p {
    margin-top: 10px;
    font-size: 16px;
  }

  .info-group-block:nth-child(1n) {
    background: #F78068;
  }

  .info-group-block:nth-child(2n) {
    background: #65AEDA;
  }

  .info-group-block:nth-child(3n) {
    background: #60E69C;
  }

  .info-group-block:nth-child(4n) {
    background: #F7B276;
  }


  .chart-group {
    width: 95%;
    box-shadow: 0 0 10px #eee;
    display: inline-block;
    margin: 30px 0 30px 2.5%;
  }

  .chart-group:hover {
    box-shadow: 0 0 10px #ddd;
  }

  .chart-group .title {
    margin: 15px;
    overflow: hidden;
    border-bottom: 1px solid #eee;
  }

  .chart-group .title h3 {
    font-size: 24px;
  }

  .el-row {
    margin: 0 15px 0 0;
    display: flex;
  }

  .el-fn-btn{
    display: block;
    margin: 0 0 15px 15px;
  }

</style>
